Alignment
Description
The alignment group can be found either in Toolbar or Detail Panel. It groups any alignment related property.
Alignment Properties
flex-wrap
This sets whether the elements inside the component are forced onto one line or can wrap onto multiple lines.
This can be either further configured in the Detail Panel or via the dedicated Flex-Wrap Picker that can be found in Toolbar by choosing between horizontal and vertical.
flex-direction
This sets how the elements inside the component are placed in the flex container defining the main axis and the direction. It can be set in:
row column row-reverse column-reverse
The properties flexDirection, justifyContent and alignItems can be either further configured in the Detail Panel or via the dedicated Flex-Direction Picker that can be found in Toolbar by choosing between horizontal and vertical.
justify-content
This sets how the elements inside the component are placed along the main axis. It can be set in:
start center end space-between space-around
align-items
This sets how the elements inside the component are placed along the cross axis. It can be set in:
start center end baseline stretch
justify-items
This sets how the elements inside the component are justified along the appropriate axis. It can be set in:
start center end baseline stretch
align-content
This sets how the elements inside the component are placed along the cross axis. It doesn't affect single-line containers. This can be set in:
start center end space-between space-around stretch
overflow-x
This sets the behavior for content if it doesn't fit inside the container in horizontal direction. It can be set in:
visible hidden scroll auto
overflow-y
This sets the behavior for content if it doesn't fit inside the container in vertical direction. It can be set in:
visible hidden scroll auto
show-scrollbar
This controls whether a scrollbar is displayed or not, while scrolling is still allowed.
Occurences
Toolbar
A minified selection of the most common properties related to the alignment is found here.
@Note insert image here
The dedicated picker is separated into three different parts. First of all you select a flex direction via the Toolbar which will open another Toolbar Extension to adjust further properties related to it. In addition to that you can toggle flex wrap via the bar seperately.
Detail Panel
Inside the Detail Panel a more detailed adjustment is presented. This picker offers the ability to manipulate each property related to the alignment individually.
@Note insert image here